<script setup>
const isDark = useDark();
const toggleDark = useToggle(isDark);

const { proxy } = getCurrentInstance();
const langs = proxy.$i18n.availableLocales;
console.log(langs);

const toggleLocales = () => {
  const theLang = proxy.$i18n.locale;
  const lang = langs[(langs.indexOf(theLang) + 1) % langs.length];
  proxy.setLang(lang);
};
</script>
<template>
  <!-- 默认布局 -->
  <header>
    <div class="text-right px-8 py-2">
      <div class="relative inline-flex items-center">
        <router-link to="/">
          <icon-font name="ri-home-3-line" />
          首页
        </router-link>
        <span>|</span>
        <router-link to="/demo">Demo</router-link>
        <span>|</span>
        <router-link to="/demo/about">Md页</router-link>
        <span>|</span>
        <router-link to="/demo/http">请求</router-link>
        <span>|</span>
        <router-link to="/demo/store">状态机</router-link>
        <span>|</span>
        <router-link to="/demo/icon">图标集</router-link>
        <span>|</span>
        <router-link to="/demo/lang">语言</router-link>
        <span>|</span>
        <router-link to="/demo/other">另一布局</router-link>
        <span>|</span>
        <button class="icon-btn mx-2" @click="toggleLocales">
          <span class="text-red-400 dark:text-green-400">切换语种</span>
          <icon-svg-carbon-language class="text-xl" />
        </button>
        <button :title="isDark ? $t('light-title') : $t('dark-title')" class="@apply !outline-none opacity-60 hover:opacity-80 ml-2" @click="toggleDark()">
          <icon-svg-carbon-sun class="text-xl" v-show="!isDark" />
          <icon-svg-carbon-moon class="text-xl" v-show="isDark" />
        </button>
      </div>
    </div>
  </header>
  <RouterView />
  <footer class="text-center text-light-900">[默认布局]</footer>
</template>

<i18n lang="json">
{
  "zh-CN": {
    "dark-title": "黑暗模式",
    "light-title": "浅亮模式"
  },
  "zh-TW": {
    "dark-title": "黑暗模式",
    "light-title": "淺亮模式"
  },
  "en": {
    "dark-title": "dark mode",
    "light-title": "bright mode"
  }
}
</i18n>

<style scoped>
.relative span {
  padding: 0 6px;
  color: #cccccc;
}
.router-link-exact-active {
  color: #ff0000;
}
</style>
